<template>
    <el-container v-loading="loading">
            
        <el-main>
            <div class="header">
                <h1>{{ route.params.title }} Details</h1>
            </div>
            <el-collapse v-model="activeCollapse">
                <el-collapse-item name="detail">
                    <template #title>
                        <h1>Experiment Set Properties</h1>
                    </template>
                    <div class="detail">
                        <div v-for="(value, key) of detailIndex" class="item-container">
                            <div class="detail-item">
                                <div class="item-key">{{ value }}</div>
                                <div v-if="tableData[0].fields[key]==='nan'">
                                    <div class="item-value">-</div>
                                </div>
                                <div v-else>
                                    <div class="item-value">{{ tableData[0].fields[key] }}</div>
                                </div>  
                            </div>
                        </div>
                    </div>
                </el-collapse-item>
            </el-collapse>
            <div class="radar">
                <div class="chart" ref="chart"></div>
            </div>
            <div class="tabs">
                <el-tabs v-model="activeTab" type="card" @tab-click="handleTabClick">
                    <el-tab-pane label="cluster" name="cluster">
                        <Cluster :experimentType="route.params.experimentType" :gse="route.params.title" :sampleType="route.params.sampleType"/>
                    </el-tab-pane>
                    <el-tab-pane label="data detail" name="table">
                        <CellDetail :gse="route.params.title" :sampleType="route.params.sampleType"/>
                    </el-tab-pane>
                    <el-tab-pane label="HiGlass" name="HiGlass" lazy>
                        <Higlass :experimentType="route.params.experimentType" :gse="route.params.title" :sampleType="route.params.sampleType"/>
                    </el-tab-pane>
                    <el-tab-pane label="3D Model" name="3D Model" lazy>
                        <MolStar 
                            :experimentType="route.params.experimentType" 
                            :gse="route.params.title" 
                            :sampleType="route.params.sampleType"
                            @molstar-loading="handleMolstarLoading"
                            />
                    </el-tab-pane>
                </el-tabs>
            </div>
        </el-main>
    </el-container>
</template>

<script lang="ts" setup>
    import { useRoute } from 'vue-router';
    import { onBeforeMount, ref, reactive, onMounted } from 'vue'
    import { ElMessage } from 'element-plus'
    import { get, post, } from '@/axios/api';
    import Higlass from './tabs/Higlass.vue';
    import CellDetail from './tabs/CellDetail.vue';
    import Cluster from './tabs/Cluster.vue';
    import MolStar from './tabs/MolStar.vue';
    import { detailIndex, radarIndex } from './dataConfigs'
    import * as echarts from "echarts";

    let loading = ref(false)
    let activeTab = ref('cluster')
    let activeCollapse = ref(['detail'])
    const route = useRoute()
    let tableData = ref([
        {fields: {}},
    ])
    let chart = ref(null)

    let option:any = ref({
        title: {
            text: 'Basic Radar Chart'
        },
        legend: {
            data: ['Allocated Budget', 'Actual Spending']
        },
        radar: {
            // shape: 'circle',
            indicator: [],
            splitLine: {
                show: true,
                lineStyle: {
                    color: '#bbb', // 设置分割线的颜色
                    width: 1,
                    type: 'solid'
                }
            },
            axisLine: {
                show: true,
                lineStyle: {
                    color: '#ccc', // 设置轴线的颜色
                    width: 1,
                    type: 'solid'
                }
            },
            splitArea: {
                show: true,
                areaStyle: {
                    // 使用间隔背景颜色
                    color: ['#f5f5f5', '#ffffff'] // 这里可以设置成你需要的间隔颜色
                }
            }
        },
        series: [
            {
                name: 'basic',
                type: 'radar',
                data: [
                    {
                        value: [],
                        name: 'basic',
                        label: {
                            show: true,
                            formatter: function (params: {value: any}) {
                                return parseFloat(params.value).toFixed(4);
                            }
                        },
                        areaStyle: {
                            color: '#428BD4',
                        }
                    },
                ]
            }
        ],
    })

    async function getRadarData() {
        loading.value = true;
        let res: any = {};
        try {
            res = await post('/get_cell_avg_data/', { gse: route.params.title });
            if (res && res.success) {
                let radarChart = echarts.init(chart.value)
                const indicators:any[] = Object.keys(res.data).map((key:any) => {
                    return { name: radarIndex[key], color: 'black' };
                });
                const values = Object.values(res.data);
                option.value.radar.indicator = indicators;
                option.value.series[0].data[0].value = values;
                radarChart.setOption(option.value)
            } else {
                ElMessage.error('Failed to fetch data');
            }
        } catch (error) {
            ElMessage.error('Error fetching data');
        } finally {
            loading.value = false;
        }
    }

    async function get_detail() {
        loading.value = true
        let res: any = {}
        try {
            res = await get('/get_gse_detail/', { gse_title: route.params.title, sample_type: route.params.sampleType });
            if (res && res.success) {
                tableData.value = res.data
            }
        } catch (error:any) {
            ElMessage({
                message: error,
                type: 'error',
            })
        } finally {
            loading.value = false
        }
    }

    function handleTabClick(pane, event) {
        console.log(pane, event)
    }

    function handleMolstarLoading(val) {
        loading.value = val
        if (val) {
            ElMessage({
                message: 'It takes about a few seconds to load the 3D model.',
                type: 'info',
            })
        }
    }

    onBeforeMount(() => {
        getRadarData()
        get_detail()
    })

    onMounted(() => {

    })
</script>

<style scoped>
    .detail {
        width: 100%;
        display: flex;
        justify-content: flex-start;
        flex-wrap: wrap;
    }

    .detail-item {
        width: 100%;

    }

    .item-container {
        width: calc(25% - 20px);
        margin: 10px;
        display: flex;
        flex-direction: column;
    }

    .item-key {
        margin-bottom: 10px;
        font-family: SourceSansPro;
        font-size: large;
        font-weight: bold;
    }

    .tabs {
        width: 100%;
    }


    .chart {
        width: 100%;
        height: 500px;
    }

    .img-container {
        width: 100%;
        margin: auto;
        display: flex;
        justify-content: center;
    }

    img {
        width: 100%;
        height: auto
    }

    .cluster-container {
        box-sizing: border-box;
    }

    .header {
        width: 100%;
        margin: auto;
    }
</style>

